<nz-card class="m-b-2">
    <div class="recommend">
        <div class="bt-save">
            <button nz-button nzType="primary" (click)="save()" *ngIf="permission.userPermission.has('goods:cGoodsRecommendConfig:save')">保存</button>
        </div>
        <div class="bt-products">
            <button nz-button nzType="primary" (click)="showModal()" *ngIf="permission.userPermission.has('goods:cGoodsRecommendConfig:select')">选择更多商品</button>
        </div>
    </div>
</nz-card>

<nz-card>
    <main>
        <nz-table
            #borderedmTable
            nzOuterBordered
            nzSize="small"
            [nzFrontPagination]="false"
            [nzShowPagination]="false"
            [nzData]="listOfData">
            <thead>
                <tr>
                    <th nzAlign="center">序号</th>
                    <th nzAlign="center">商品ID</th>
                    <th nzAlign="left">商品名称</th>
                    <th nzAlign="center">商品短名称</th>
                    <th nzAlign="center">商品分类</th>
                    <th nzAlign="center">商品库存</th>
                    <th nzAlign="center">商品图片</th>
                    <th nzAlign="center">状态</th>
                    <th nzAlign="center">b端单价</th>
                    <th nzAlign="center">c端单价</th>
                    <th nzAlign="center">适用用户</th>
                    <th nzAlign="center">标签颜色</th>
                    <th nzAlign="center">推荐标签</th>
                    <th nzAlign="center">固定位置</th>
                    <th nzAlign="center">操作</th>
                </tr>
            </thead>
    
            <tbody>
                <tr *ngFor="let data of listOfData let i = index">
                    <td nzAlign="center">{{ i + 1 }}</td>
                    <!-- 商品编号 -->
                    <td nzAlign="center">{{ data.goodsId }}</td>
                    <!-- 商品名称 -->
                    <td nzAlign="left">{{ data.name }}</td>
                    <!-- 商品短名称 -->
                    <td nzAlign="center">{{ data.shortName }}</td>
                    <!-- 商品分类 -->
                    <td nzAlign="center">{{ data.goodsType }}</td>
                    <!-- 商品库存 -->
                    <td nzAlign="center">{{ data.stockNum }}</td>
                    <!-- 商品图片 -->
                    <td nzAlign="center">
                        <img nz-image width="40px" nzSrc="{{ data.icon }}" [nzFallback]="fallback" />
                    </td>
                    <!-- 状态 0：下架，1：上架-->
                    <td nzAlign="center">
                        <span [ngStyle]="{'color': data.recommendStatus == 1 ? '#87d068' : '#f50'}">
                            {{ data.recommendStatus == 1 ? '上架' : data.recommendStatus == 0 ? '下架' : '-' }}
                        </span>
                    </td>
                    <!-- b端单价 -->
                    <td nzAlign="center">￥ {{ data.priceB || '-' }}</td>
                    <!-- c端单价 -->
                    <td nzAlign="center">￥ {{ data.priceC || '-' }}</td>
                    <!-- 适用用户 -->
                    <td nzAlign="center">
                        <nz-tag [nzColor]="data.userType == 1 ? '#87d068' : data.userType == 2 ? '#2db7f5' : ''">
                            {{ data.userType == 0 ? '通用' : data.userType == 1 ? 'C端' : data.userType == 2 ? 'B端' : '-' }}
                        </nz-tag>
                    </td>
                    <!-- 标签颜色 -->
                    <td nzAlign="center">
                        <input nz-input (ngModelChange)="inputChange(data)" type="color" nzBorderless [(ngModel)]="data.labelColor" />
                    </td>
                    <!-- 推荐标签 -->
                    <td nzAlign="left">
                        <input type="text" (keyup)="inputChange(data)" nz-input placeholder="请输入" [maxLength]="4" [(ngModel)]="data.labelText" />
                    </td>
                    <!-- 固定位置 -->
                    <td nzAlign="center">
                        <nz-input-number [nzMin]="1" [nzStep]="1" [nzPrecision]="0" [(ngModel)]="data.sort"></nz-input-number>
                    </td>
                    <td nzAlign="center" class="td-item">
                        <!-- <button nz-button nzType="text" (click)="onTableMove(data, 'up')" [disabled]="i == 0" *ngIf="permission.userPermission.has('goods:cGoodsRecommendConfig:up')">上移</button>
                        <button nz-button nzType="text" (click)="onTableMove(data, 'down')"
                            [disabled]="i+1 == listOfData?.length" class="operate-button" *ngIf="permission.userPermission.has('goods:cGoodsRecommendConfig:dn')">下移</button> -->
                        <a
                            nz-button
                            nz-button-tdlink
                            nzType="link"
                            nzDanger
                            nz-popconfirm
                            nzPopconfirmTitle="确认删除？"
                            *ngIf="permission.userPermission.has('goods:cGoodsRecommendConfig:delete')"
                            (nzOnConfirm)="confirm(data)">
                            删除
                        </a>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </main>
</nz-card>

<nz-modal
    [(nzVisible)]="isVisible"
    nzTitle="选择商品"
    (nzOnCancel)="handleCancel()"
    [nzWidth]="1100"
    [nzFooter]="null">
    <ng-container *nzModalContent>
        <!-- seach START -->
        <div nz-space class="modal-seach">
            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">商品</label>
                <div class="seach-control">
                    <input type="text" nz-input placeholder="请输入商品ID、名称" [(ngModel)]="queryForm.name" />
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">分类</label>
                <div class="seach-control">
                    <nz-select nzPlaceHolder="全部" [(ngModel)]="queryForm.typeId">
                        <nz-option
                            *ngFor="let data of GoodsTypeList"
                            nzValue="{{ data.id }}"
                            nzLabel="{{ data.name }}">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">品牌</label>
                <div class="seach-control">
                    <nz-select nzPlaceHolder="全部" [(ngModel)]="queryForm.brandIds">
                        <nz-option
                            *ngFor="let data of BrandTypeList"
                            nzValue="{{ data.id }}"
                            nzLabel="{{ data.name }}">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <button nz-button nzType="primary" (click)="query()" class="m-r-8">查询</button>
                <button nz-button nzType="default" (click)="backList()">重置</button>
            </div>
        </div>
        <!-- seach END -->

        <!-- table -->
        <div class="table-wrap p-t-10">
            <nz-table
                #basicTable
                nzSize="small"
                nzShowSizeChanger
                nzShowQuickJumper
                nzOuterBordered
                [nzFrontPagination]="false"
                [nzLoadingDelay]="100"
                [nzLoading]="tableLoading"
                [nzData]="detailsData?.records"
                [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
                [nzTotal]="detailsData?.total"
                [nzPageIndex]="detailsData?.current"
                [nzPageSize]="queryForm.size"
                [nzShowTotal]="totalTemplate"
                (nzPageIndexChange)="onPageIndexChange($event)"
                (nzPageSizeChange)="onPageSizeChange($event)"
            >
                <thead>
                    <tr>
                        <th nzAlign="center" nzWidth="110px">商品ID</th>
                        <th nzAlign="center">商品名称</th>
                        <th nzAlign="center" nzWidth="130px">商品分类</th>
                        <th nzAlign="center" nzWidth="130px">商品品牌</th>
                        <th nzAlign="center" nzWidth="120px">适用用户</th>
                        <th nzAlign="center" nzWidth="100px">商品状态</th>
                        <th nzAlign="center" nzWidth="120px">操作</th>
                    </tr>
                </thead>
      
                <tbody>
                    <!-- <tr *ngIf="searchHint && detailsData?.records">
                        <td class="searchHint" nzAlign="center" colspan="13">
                            <span>搜索 “{{searchName}}”，找到&nbsp;{{ detailsData?.total }}&nbsp;条结果</span>
                            <a nz-button nzType="link" (click)="backList()">返回原列表</a>
                        </td>
                    </tr> -->
                    <tr *ngFor="let data of detailsData?.records">
                        <td nzAlign="center">{{ data.id }}</td>
                        <td nzAlign="left">{{ data.name ? data.name : '-' }}</td>
                        <td nzAlign="center">{{ data.typeName ? data.typeName : '-' }}</td>
                        <td nzAlign="center">{{ data.brandName ? data.brandName : '-' }}</td>
                        <td nzAlign="center">{{ data.userType == 0 ? '通用' : data.userType == 1 ? 'C端' : data.userType == 2 ? 'B端' : '-' }}</td>
                        <!-- 状态 0：下架，1：上架-->
                        <td nzAlign="center">
                            <span [ngStyle]="{'color': data.status == 1 ? '#87d068' : '#f50'}">
                                {{ data.status == 0 ? '无效' : data.status == 1 ? '已上架' : '已下架' }}
                            </span>
                        </td>
                        <td nzAlign="center">
                            <a nz-button nzType="link" *ngIf="disableGoods(data.code)" [disabled]="true">选择</a>
                            <a nz-button nzType="link" *ngIf="!disableGoods(data.code)" (click)="sendGoods(data)">选择</a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
      
            <!-- 分页template -->
            <ng-template #totalTemplate let-total>共有 {{ detailsData?.total }} 条</ng-template>
        </div>
    </ng-container>
</nz-modal>
